<template>
  <index>
    <register1 v-if="active == 0" :params="params" v-model="active"></register1>
    <register2 v-if="active ==1" :params="params" v-model="active" :data="data"></register2>
    <div v-if="active == 2" class="register2-page">
      <div class="register2-headline">个人认证材料</div>
      <div class="register2-subhead">为保证平台求职环境真实性，需要完成行业注册人员认证，平台对人才信息保密，未授权不向第三方开放</div>
      <div class="register2-form">
        <div>
          <div>
            <el-form
              label-position="right"
              label-width="140px"
              :model="params"
              class="register3-el-from"
            >
              <el-form-item label="身份证号码">
                <el-input class="theme-input long-input" placeholder="请输入" v-model="params.IDCard"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div>
              <el-form
                class="register3-el-from2-float"
                label-position="right"
                label-width="140px"
                :model="params"
                v-for="(item ,index) in params.licenseDtoList"
                :key="index"
              >
                <div>
                  <el-form-item label="执业类型" required>
                    <!-- <el-select v-model="item.licenseType" class="id-input">
                      <el-option
                        v-for="(item, index) in data.allLicenseList"
                        :key="index"
                        :value="item.id"
                        :label="item.content"
                      ></el-option>
                    </el-select>-->
                    <el-cascader
                      :options="data.allLicenseList||[]"
                      :props="props"
                      class="register-cascader"
                      @change="getLicense"
                      v-model="item.licenseType"
                    ></el-cascader>
                  </el-form-item>
                  <el-form-item label="证书编号" required>
                    <el-input
                      class="theme-input id-input"
                      placeholder="请输入"
                      v-model="item.licenseNum"
                    ></el-input>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div style="display:flex;justify-content: center;">
        <el-row style="width:890px;display:flex;align-items:center;">
          <el-col :span="4" class="add-text">添加执业证书</el-col>
          <el-col :span="2" class="add-img" v-if="params.licenseDtoList.length < 3">
            <img src="../../assets/img/register/add.png" @click="addLicense">
          </el-col>
          <el-col :span="2" class="add-img" v-if="params.licenseDtoList.length > 1">
            <img
              src="../../assets/img/register/delete.png"
              width="43px"
              height="42px"
              @click="deleteLicense"
            >
          </el-col>
          <el-col :span="14" class="add-sub-text">（最少添加一个，最多可添加3个）</el-col>
        </el-row>
      </div>
      <div style="display:flex;justify-content: center;margin:35px 0 0 0;">
        <el-button class="theme-button submit-button" @click="doSubmit">提交</el-button>
      </div>
      <div class="explan-text">
        注册代表您已同意
        <span style="color:#f15c18;cursor:pointer;" @click="lookAgreement">《注册工程师人才网用户协议》</span>
      </div>
    </div>
    <el-dialog class="register-dialog" :visible.sync="dialogVisible" title="注册工程师人才网用户协议">
      <div class="register-dialog-content" v-html="agreement"></div>
    </el-dialog>
  </index>
</template>

<script>
import Index from './index'
import register1 from './register1'
import register2 from './register2'
import validate from '../../assets/utils/validate.js'
import _subject from '../../assets/utils/subject'
export default {
  data() {
    return {
      active: 0, //注册时的页面
      data: {}, //注册页面初始化数据
      dialogVisible: false,
      params: {
        //传入后台数据
        phone: '', //电话号
        sms: '', //短信验证码
        password: '', //密码
        confirmPassword: '', //确认密码
        name: '', //姓名
        sex: 0, //性别
        birth: '', //出生年份
        workDay: '', //工作年份
        city: '', //所在城市
        salaryPerMonth: '', //当前年薪
        monthCount: '', //月
        tax: 0, //税前税后
        jobState: '', //求职状态
        IDCard: '', //身份证号
        licenseDtoList: [
          {
            licenseType: [], //职业类型
            licenseNum: ''
          }
        ],
        email: ''
      },
      props: {
        value: 'licenseTypeId',
        children: 'licenseSonList',
        label: 'licenseType'
      },
      licenseDtoList: [],
      agreement: ''
    }
  },
  methods: {
    initData() {
      _g.apiPost('/login/getAllStaticRecord.do', {}).then(res => {
        this.data = res.data
      })
      _g.apiPost('/login/getAgreement.do', { state: 1 }).then(res => {
        this.agreement = res.data
      })
    },
    getLicense(val) {
      console.log(val)
      console.log(this.params.licenseDtoList)
    },
    check() {
      if (this.params.IDCard != '' && !validate.isIdCard(this.params.IDCard)) {
        _g.message('请输入正确的身份证号', 'warning')
        return false
      }
      for (let i = 0; i < this.params.licenseDtoList.length; i++) {
        if (this.params.licenseDtoList[i].licenseType == '') {
          _g.message('请选择执业类型', 'warning')
          return false
        }
        if (this.params.licenseDtoList[i].licenseNum == '') {
          _g.message('请填写证书编号', 'warning')
          return false
        }
      }
      return true
    },
    doSubmit() {
      //提交信息
      if (!this.check()) return false
      this.formatData()
      let params = {
        phone: this.params.phone,
        sms: this.params.sms,
        password: this.params.password,
        name: this.params.name,
        sex: this.params.sex,
        birth: JSON.stringify(this.params.birth),
        workDay: JSON.stringify(this.params.workDay),
        city: this.params.city,
        salaryPerMonth: this.params.salaryPerMonth,
        monthCount: this.params.monthCount,
        tax: this.params.tax,
        jobState: this.params.jobState,
        IDCard: this.params.IDCard,
        licenseDtoList: JSON.stringify(this.licenseDtoList),
        email: this.params.email
      }
      _g.apiPost('/login/register.do', params).then(res => {
        _g.toMessage(res)
        // console.log(res)
        if (res.status == 0) {
          _g.apiPost('/login/loginPass.do', {
            phone: this.params.phone,
            password: this.params.password
          }).then(res => {
            if (res.status == 0) {
              this.setUserInfo(res.data.talent)
              this.$router.push({ path: '/index' })
            }
          })
        }
      })
    },

    setUserInfo(val) {
      //console.log('login info', val)
      localStorage.setItem(localSaved.commTalentId,String(val.id))
      localStorage.setItem(localSaved.userInfo, JSON.stringify(val))
      _subject.register()
    },
    addLicense() {
      this.params.licenseDtoList.push({ licenseType: [], licenseNum: '' })
    },
    deleteLicense() {
      this.params.licenseDtoList.pop()
    },
    formatData() {
      this.licenseDtoList.splice(0,this.licenseDtoList.length)
      this.params.licenseDtoList.forEach(item => {
        let a = {
          licenseType: item.licenseType[1].toString(),
          licenseNum: item.licenseNum
        }
        this.licenseDtoList.push(a)
      })
    },
    lookAgreement() {
      this.dialogVisible = true
    }
  },
  mounted() {
    this.initData()
  },
  components: {
    Index,
    register1,
    register2
  }
}
</script>

<style lang="scss" scoped>
.submit-button {
  width: 419px;
  height: 55px;
  background: #f09338;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
.explan-text {
  margin: 11px 0 45px 0;
  text-align: center;
  font-size: 16px;
  color: #919191;
}
.theme-upload {
  width: 43px;
  height: 43px;
  cursor: pointer;
  border: 1.3px dashed #f15c18;
  display: flex;
  align-items: center;
  justify-content: center;
  .theme-upload-icon {
    color: #f15c18;
    font-size: 12px;
    font-weight: 900;
  }
}
.long-input {
  width: 660px;
}
.id-input {
  width: 270px !important;
}
.id-select {
  width: 200px !important;
}
.register3-el-from {
  width: 900px !important;
}
.register3-el-from2-float {
  width: 390px !important;
  float: left;
}
.add-text {
  font-size: 20px;
  font-weight: 400;
  color: #666666;
  text-align: right;
}
.add-img {
  padding: 0 0 0 10px;
  img {
    cursor: pointer;
  }
}
.add-sub-text {
  font-size: 16px;
  font-weight: 400;
  color: #919191;
}
.register-cascader {
  width: 270px;
  input {
    width: 270px;
    height: 100%;
  }
}
</style>
